<template>
  <div>
    <div v-on:click="onShowKeyboardClick"
         style="background: white;display: flex;flex-direction: row;padding: 10px 10px;margin-top: 10px">
      <span style="font-size: 30px;font-weight: bold;color: #425C95">¥</span>
      <span style="position: relative;top:5px;left:10px;font-size: 25px">{{money}}</span>
      <span style="position: relative;top:12px;left:10px;font-size: 18px;color: #D4DAE8"
            v-if="money==''">{{placeholder}}</span>
    </div>
    <div style="margin-top: 10px;background: white;display: flex;flex-direction: row;color: #425C95;padding: 10px"
         v-on:click="onSelectBankCardClick">
      <span>付款账户</span>
      <span class="selected-bank-info">{{selectedBankCard.bankTitleShow}}</span>
    </div>

    <select-bank-card-sheet-up @onBankCardSelected="onBankCardSelected" :selectedBankCard="selectedBankCard.bankCard"
                               :visible="isShowSelectBankCard"></select-bank-card-sheet-up>


    <money-input-keyboard @onFinished="onFinished" @onMoneyChanged="onMoneyChanged"
                          :initMoney="money"
                          v-if="isShowKeyboard"></money-input-keyboard>


    <x-button :gradients="buttonGradients"
              style="width: 80%;border-radius:30px;padding: 5px;margin-top: 40px"
              @click.native="onSiphonIntoClick" :disabled="buttonDisabled">
      立刻转入
    </x-button>
  </div>
</template>

<script>
  import MoneyInputKeyboard from '@/components/MoneyInputKeyboard'
  import SelectBankCardSheetUp from '@/components/SelectBankCardSheetUp'
  import { Cell, Group, XButton } from 'vux'

  export default {
    name: '',
    components: {
      MoneyInputKeyboard,
      Cell,
      Group,
      XButton,
      SelectBankCardSheetUp
    },
    data () {
      return {
        isShowKeyboard: true,
        money: '',
        placeholder: '50元起存',
        buttonDisabled: true,
        isShowSelectBankCard: false,
        selectedBankCard: {
          bankTitleShow: '建设银行(4354)',
          bankCard: {
            bankName: '建设银行',
            bankNo: '4',
            cardNo: '4354',
            cardId: '0987665676',
            balance: '10000',
            currentLimit: '10000',
            species: '储',
            isSelected: true
          }
        },
        buttonGradients: ['#f2b08e', '#f2b08e']
      }
    },
    created () {
      this.$store.commit('setTitle', '转入')
      this.buttonDisabled = true
    },
    methods: {
      onMoneyChanged: function (money) {
        if (this.isShowKeyboard) {
          this.money = money
        }
      },
      onShowKeyboardClick: function () {
        this.isShowKeyboard = !this.isShowKeyboard
      },
      onFinished: function () {
        this.isShowKeyboard = false
      },
      onBankCardSelected: function (bankCard) {
        this.isShowSelectBankCard = !this.isShowSelectBankCard
        this.selectedBankCard.bankTitleShow = bankCard.bankName + '(' + bankCard.cardNo + ')'
        this.selectedBankCard.bankCard = bankCard
      },
      onSelectBankCardClick: function () {
        this.isShowKeyboard = false
        this.isShowSelectBankCard = !this.isShowSelectBankCard
      },
      onSiphonIntoClick: function () {
        this.isShowKeyboard = false
        this.isShowSelectBankCard = false
        console.log('test')
        this.$vux.alert.show({
          title: '温馨提示',
          content: '仅提供演示，暂时不能转入',
          onShow () {

          },
          onHide () {
          }
        })
      }
    },
    watch: {
      money: function (current, old) {
        if (current > 0) {
          this.buttonDisabled = false
        } else {
          this.buttonDisabled = true
        }
      },
      buttonDisabled: function (curVal, oldVal) {
        console.log(curVal + '|' + 'buttonDisabled')
        if (curVal) {
          this.buttonGradients = ['#f2b08e', '#f2b08e']
        } else {
          this.buttonGradients = ['#F29360', '#F29360']
        }
      }
    }
  }
</script>

<style scoped>
  .selected-bank-info {
    margin-left: 20px;
    flex: 1
  }

  .selected-bank-info::after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -1px;
    left: 52%;
  }

</style>
